<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3DBookcase</title>
    <script src="3d-util.js"></script>
    <style>
        .perserve-3d {
            height: 150px;
            width: 500px;
            transform-style: preserve-3d;
            perspective: 400px;
            margin: auto;
            position: relative;
        }

        .perserve-3d-item {
            height: 100px;
            width: 500px;
            background: linear-gradient(#B58A54, #C38E52, #CF9C63);
            transform: rotateX(60deg);
            position: relative;
        }

        .perserve-3d-item-after {
            position: absolute;
            height: 10px;
            background: linear-gradient(#7C4B1B, #CF9D68, #B07F49);
        }
    </style>
</head>
<body>
<div class="perserve-3d">
    <div class="perserve-3d-item"></div>
    <div class="perserve-3d-item-after"></div>
</div>
<div class="perserve-3d">
    <div class="perserve-3d-item"></div>
    <div class="perserve-3d-item-after"></div>
</div>
<div class="perserve-3d">
    <div class="perserve-3d-item"></div>
    <div class="perserve-3d-item-after"></div>
</div>

<script>

    const perserve3DList = document.getElementsByClassName('perserve-3d')
    const perserve3DItemList = document.getElementsByClassName('perserve-3d-item')
    const perserver3DItemAfter = document.getElementsByClassName('perserve-3d-item-after')

    const floorLength = perserve3DList.length

    for (let i = 0; i < floorLength; i++) {

        const computedPerserveParent = window.getComputedStyle(perserve3DList[i])
        const computedPerserve = window.getComputedStyle(perserve3DItemList[i])
        const perserve3DItemAfter = perserver3DItemAfter[i]

        const computedPerserveTransform = computedPerserve.getPropertyValue('transform')


        function getNumber(model) {
            return (str, target = '') => {
                return str.replace(model, target)
            }
        }

        function getRoteSin(rotate) {
            return Math.sin((rotate * Math.PI) / 180)
        }

        function getRoteCos(rotate) {
            return Math.cos((rotate * Math.PI) / 180)
        }

        const forNumber = getNumber(/[^0-9]/g)

        const perspective = forNumber(computedPerserveParent.getPropertyValue('perspective'))
        const originHeight = forNumber(computedPerserve.getPropertyValue('height'))
        const originWidth = forNumber(computedPerserve.getPropertyValue('width'))

        // 旋转角度
        const rotateDegree = threeUtils.getRotateDeg(computedPerserveTransform).x.toFixed(2)
        // 底部视觉宽度
        const visualBottomWidth = threeUtils.getRotatedVisualWidth(perspective, originHeight, originWidth, rotateDegree, false)
        // 视觉高度
        const visualOriginHeight = threeUtils.getRotateHeight(originHeight, rotateDegree)
        // 左偏移(正值)
        const offsetLeft = (visualBottomWidth - originWidth) / 2

        const offsetTop = originHeight - (originHeight - visualOriginHeight) / 2


        perserve3DItemAfter.style.width = `${visualBottomWidth}px`
        perserve3DItemAfter.style.left = `-${offsetLeft}px`
        perserve3DItemAfter.style.top = `${offsetTop - 1.5}px`
    }


</script>
</body>
</html>